<template>
  <div class="collect-information-box">
    <div class="title">
      <div class="title-img">
        <img src="../../src/assets/logo.png">
      </div>
      <span class="title-text">
        湖南中医药大学第一附属医院
      </span>
      <div class="title-Instructions">
        进修生报名
      </div>
      <span style="color: red;cursor: pointer;margin-top: 0.513rem;font-size: 0.385rem" @click="goinquire">
        点我查询审核结果
      </span>
      <div class="Download-box">
        <span @click="DownloadTZ">点击下载通知</span>
        <span @click="DownloadZL">点击下载填表材料</span>
      </div>
    </div>
    <div class="form-box">
      <van-form @submit="onSubmit">

        <van-cell-group  inset>
          <div class="form-title">
            <span>通知</span>
            <span style="font-size: 0.256rem;color: red;margin-top: 0.156rem">* 请填表的同学仔细阅读本通知</span>
          </div>
          <div class="docWrap">
            <!-- 预览文件的地方（用于渲染） -->
            <div class="files-box" ref="files"></div>
          </div>
        </van-cell-group>


        <van-cell-group style="margin-top: 0.513rem" inset>
          <div class="form-title">
            <span>基本信息</span>
          </div>
          <van-field
              @failed="onFailed"
              v-model="form.name"
              name="姓名"
              label="姓名"
              input-align="right"
              error-message-align="right"
              required
              placeholder="姓名"
              :rules="[{ required: true, message: '请填写姓名' }]"
          ></van-field>
          <van-field
              v-model="form.idNumber"
              name="身份证"
              label="身份证"
              required
              input-align="right"
              error-message-align="right"
              placeholder="身份证"
              :rules="[{ required: true, message: '请填写身份证' },
            {
              pattern:
                /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
              message: '身份证号不正确'
            }
            ]"
          ></van-field>
          <van-field name="sex" label="性别"
                     required
                     :rules="[{ required: true, message: '请填写性别' }]"
                     error-message-align="right"
                     input-align="right">
            <template #input>
              <van-radio-group v-model="form.sex" direction="horizontal">
                <van-radio name="男">男</van-radio>
                <van-radio name="女">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
              v-model="form.age"
              name="年龄"
              label="年龄"
              required
              input-align="right"
              error-message-align="right"
              placeholder="年龄"
              :rules="[{ required: true, message: '请填写年龄' }]"
          ></van-field>
          <van-field
              v-model="form.politicalStatus"
              name="政治面貌"
              label="政治面貌"
              is-link
              readonly
              required
              input-align="right"
              error-message-align="right"
              placeholder="政治面貌"
              @click="PoliticalstatusListshow=true"
              :rules="[{ required: true, message: '请选择政治面貌' }]"
          />
          <van-popup v-model="PoliticalstatusListshow" round position="bottom">
            <van-picker
                title="政治面貌"
                show-toolbar
                :columns="PoliticalstatusList"
                @confirm="PoliticalstatusListshowConfirm"
                @cancel="PoliticalstatusListshow=false"
            />
          </van-popup>
          <van-field
              readonly
              clickable
              is-link
              v-model="address"
              name="area"
              input-align="right"
              error-message-align="right"
              :value="addressvalue"
              required
              label="地区选择"
              placeholder="点击选择省市区"
              :rules="[{ required: true, message: '点击选择省市区' }]"
              @click="showArea = true"
          />
          <van-popup v-model="showArea" position="bottom">
            <van-area
                :area-list="areaList"
                @confirm="onaddressConfirm"
                @cancel="showArea = false"
            />
          </van-popup>
          <van-field
              v-model="form.nation"
              name="民族"
              label="民族"
              required
              input-align="right"
              error-message-align="right"
              placeholder="民族"
              :rules="[{ required: true, message: '请填写民族' }]"
          ></van-field>
<!--          <van-field-->
<!--              v-model="form.sourceHospital"-->
<!--              name="医院名称"-->
<!--              label="医院名称"-->
<!--              required-->
<!--              input-align="right"-->
<!--              error-message-align="right"-->
<!--              placeholder="医院名称"-->
<!--              :rules="[{ required: true, message: '请填写医院名称' }]"-->
<!--          ></van-field>-->
<!--          <van-field-->
<!--              v-model="form.badgeNumber"-->
<!--              name="胸牌号码"-->
<!--              label="胸牌号码"-->
<!--              required-->
<!--              input-align="right"-->
<!--              error-message-align="right"-->
<!--              placeholder="胸牌号码"-->
<!--              :rules="[{ required: true, message: '请填写胸牌号码' }]"-->
<!--          ></van-field>-->
          <van-field
              v-model="form.phone"
              name="联系电话"
              label="联系电话"
              input-align="right"
              error-message-align="right"
              required
              placeholder="联系电话"
              :rules="[{ required: true, message: '请填写联系电话' },{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！'}]"
          ></van-field>
          <van-field
              v-model="form.emergencyContactPhone"
              name="单位电话"
              label="单位电话"
              label-width="3rem"
              input-align="right"
              error-message-align="right"
              required
              placeholder="单位电话"
              :rules="[{ required: true, message: '请填写单位电话' }]"
          ></van-field>
          <van-field
              v-model="form.workUnit"
              name="工作单位"
              label="工作单位"
              input-align="right"
              error-message-align="right"
              required
              placeholder="工作单位"
              :rules="[{ required: true, message: '请填写工作单位' }]"
          ></van-field>
          <van-field
              label-width="3.5rem"
              name="isMemberUnit"
              label="是否为我院“湘中医”医疗联盟成员单位"
              :center="true"
                     required
                     :rules="[{ required: true, message: '请选择' }]"
                     error-message-align="right"
                     input-align="right">
            <template  #input >
              <div style="display: flex; flex-direction: column; justify-content: center;align-items: center">
                <van-radio-group v-model="form.isMemberUnit" direction="horizontal" style="align-self: flex-end;">
                  <van-radio name="是">是</van-radio>
                  <van-radio name="否">否</van-radio>
                </van-radio-group>
                <div style="color: red;font-size: 0.27rem;
                height: 0.756rem;line-height: 1.2;
                text-align: center;display: flex;
                justify-content: center;align-items: center">联盟单位请提前联系“湘中医”联盟办公室，详情请看通知</div>
              </div>
            </template>
          </van-field>
          <van-field
              label-width="3rem"
              name="isCertification"
              label="是否有相关专业资格证"
              :center="true"
              required
              :rules="[{ required: true, message: '请填写是否有相关专业资格证' }]"
              error-message-align="right"
              input-align="right">
            <template  #input>
              <van-radio-group v-model="form.isCertification" direction="horizontal">
                <van-radio name="是">是</van-radio>
                <van-radio name="无">无</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
              v-model="form.studyRoom"
              is-link
              readonly
              required
              input-align="right"
              error-message-align="right"
              label="进修科目"
              placeholder="请选择进修科目"
              :rules="[{ required: true, message: '请选择进修科目' }]"
              @click="show = true"
          />
          <van-popup v-model="show" round position="bottom">
            <van-cascader
                title="请选择进修科目"
                :options="resultJson"
                @close="show = false"
                @finish="studyRoomonFinish"
            />
          </van-popup>
          <van-field
              v-model="form.studyType"
              name="申请进修类别"
              label="申请进修类别"
              is-link
              readonly
              required
              input-align="right"
              error-message-align="right"
              placeholder="申请进修类别"
              @click="studyTypeshowPicker=true"
              :rules="[{ required: true, message: '请填写申请进修类别' }]"
          />
          <van-popup v-model="studyTypeshowPicker" round position="bottom">
            <van-picker
                title="申请进修类别"
                show-toolbar
                :columns="studyTypeColumns"
                @confirm="studyTypeConfirm"
                @cancel="studyTypeshowPicker=false"
            />
          </van-popup>
          <van-field
              v-model="form.position"
              name="职称"
              label="职称"
              is-link
              readonly
              required
              input-align="right"
              error-message-align="right"
              placeholder="职称"
              @click="positionshowPicker=true"
              :rules="[{ required: true, message: '请填写职称' }]"
          />
          <van-popup v-model="positionshowPicker" round position="bottom">
            <van-picker
                title="职称"
                show-toolbar
                :columns="positionColumns"
                @confirm="positionConfirm"
                @cancel="positionshowPicker=false"
            />
          </van-popup>
          <van-field
              v-model="form.studyProject"
              name="申请进修项目"
              label="申请进修项目"
              is-link
              readonly
              required
              input-align="right"
              error-message-align="right"
              placeholder="申请进修项目"
              @click="studyProjectshowPicker=true"
              :rules="[{ required: true, message: '请填写申请进修项目' }]"
          />
          <van-popup v-model="studyProjectshowPicker" round position="bottom">
            <van-picker
                title="申请进修项目"
                show-toolbar
                :columns="studyProjectColumns"
                @confirm="studyProjectonConfirm"
                @cancel="studyProjectshowPicker=false"
            />
          </van-popup>
          <van-field name="radio"
                     v-model="form.batch"
                     required
                     size=""
                     input-align="right"
                     error-message-align="right"
                     :rules="[{ required: true, message: '请选择批次' }]"
                     label="选择批次">
            <template #input>
              <van-radio-group v-model="form.batch" >
                <van-radio name="第一批">第一批次(3月份)</van-radio>
                <van-radio style="margin: 0.128rem 0" name="第二批">第二批次(6月份)</van-radio>
                <van-radio name="第三批">第三批次(9月份)</van-radio>
              </van-radio-group>
            </template>
          </van-field>

          <van-field
              v-model="form.deadline"
              name="申请进修期限"
              label="申请进修期限"
              is-link
              readonly
              required
              input-align="right"
              error-message-align="right"
              placeholder="申请进修期限"
              @click="deadlineshowPicker=true"
              :rules="[{ required: true, message: '请填写申请进修期限' }]"
          />
          <van-popup v-model="deadlineshowPicker" round position="bottom">
            <van-picker
                title="申请进修期限"
                show-toolbar
                :columns="deadlineColumns"
                @confirm="deadlineonConfirm"
                @cancel="deadlineshowPicker=false"
            />
          </van-popup>
        </van-cell-group>

        <van-cell-group style="margin-top: 0.513rem" inset>
          <div class="form-title">
            <span>证件上传</span>
          </div>
          <van-field name="idNumberImg"
                     v-model="form.idNumberImg"
                     required
                     input-align="right"
                     error-message-align="right"
                     label-width="4rem"
                     :rules="[{ required: true, message: '您未上传' }]"
                     placeholder="(身份证、最高学历证、资格证、执业证4证必须上传)"
                     label="上传身份证、最高学历证、资格证、执业证、职称证扫描件(整合在一个PDF文档里)">
            <template #input>
              <el-upload
                  class="upload-demo"
                  action="https://contedu.hnzyfy.com/api/files/upload"
                  :limit="1"
                  :on-success="handleChange"
                  :on-remove="handleRemove"
                  >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" style="color: red;font-size: 0.285rem">(身份证、最高学历证、资格证、执业证4证必须上传)</div>
              </el-upload>
            </template>
          </van-field>

          <van-field name="applicationForm"
                     v-model="form.applicationForm"
                     input-align="right"
                     error-message-align="right"
                     label-width="4rem"
                     required
                     :rules="[{ required: true, message: '您未上传' }]"
                     label="上传已签字盖章的进修申请表">
            <template #input>
              <van-uploader max-count="1" :after-read="applicationFormImgRead" @delete="deleteIdNumberImg" v-model="applicationFormuploader" />
            </template>
          </van-field>
          <van-field name="agreement"
                     v-model="form.agreement"
                     input-align="right"
                     error-message-align="right"
                     label-width="4rem"
                     required
                     :rules="[{ required: true, message: '您未上传' }]"
                     label="上传已签字盖章的进修管理协议">
            <template #input>
              <van-uploader max-count="1" :after-read="agreementImgRead" @delete="deleteIdNumberImg" v-model="agreementuploader" />
            </template>
          </van-field>
          <van-field name="certificate"
                     v-model="form.certificate"
                     input-align="right"
                     error-message-align="right"
                     label-width="4rem"
                     placeholder="仅仅传统医学师承需要上传"
                     label="上传跟师学习合同公证书">
            <template #input>
              <van-uploader max-count="1" :after-read="certificateImgRead" @delete="deleteIdNumberImg" v-model="certificateuploader" />
            </template>
          </van-field>
        </van-cell-group>

        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
    <div class="form-buttom">
    </div>
    <van-overlay :show="showLoad"  >
      <div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center">
        <van-loading size="50px" color="#1989fa">提交中耐心等待...</van-loading>
      </div>

    </van-overlay>
  </div>
</template>

<script>

import {UserMsgSaveOrUpdata} from "@/request/utils/user";
import {Notify, Toast} from "vant";
import { areaList } from '@vant/area-data';
import {GetByIdFile, GetFile, UploadFile} from "@/request/utils/file";
import {renderAsync} from "docx-preview";
import axios from "axios";
export default {
  name: "collect-information",
  data() {
    return {
      startList: "临床科室/内科/肺病科（呼吸与危重症医学科）\n" +
          "临床科室/内科/脾胃病科（消化内科）\n" +
          "临床科室/内科/脑病一科（神经内科）\n" +
          "临床科室/内科/心病科（心血管内科）含心电图、心脏介入室\n" +
          "临床科室/内科/血液肿瘤科\n" +
          "临床科室/内科/肾病科（肾脏内科）\n" +
          "临床科室/内科/肾病科（肾脏内科）：血液透析中心\n" +
          "临床科室/内科/内分泌内科\n" +
          "临床科室/内科/风湿病科（风湿免疫科）含实验室\n" +
          "临床科室/内科/老年病科·全科医学科\n" +
          "临床科室/内科/中医经典科\n" +
          "临床科室/中医外科/男性病外科杂病一科\n" +
          "临床科室/中医外科/男性病外科杂病二科\n" +
          "临床科室/中医外科/皮肤科\n" +
          "临床科室/中医外科/乳腺科\n" +
          "临床科室/中医外科/肛肠科\n" +
          "临床科室/中医外科/烧伤疮疡整形科（含ICU）\n" +
          "临床科室/中西医结合外科/胸心大血管外科（含ICU）\n" +
          "临床科室/中西医结合外科/脑病二科（神经外科）（含神经外科ICU、高压氧舱）\n" +
          "临床科室/中西医结合外科/肝胆胰、疝外科\n" +
          "临床科室/中西医结合外科/胃肠、甲状腺、血管外科\n" +
          "临床科室/中西医结合外科/泌尿外科（含体外碎石室）\n" +
          "临床科室/妇产医学中心/妇产科\n" +
          "临床科室/妇产医学中心/妇产科：妇科\n" +
          "临床科室/妇产医学中心/妇产科：产科\n" +
          "临床科室/妇产医学中心/中西医结合生殖中心\n" +
          "临床科室/儿童医学中心/儿科\n" +
          "临床科室/儿童医学中心/儿科：普儿科\n" +
          "临床科室/儿童医学中心/儿科：急诊儿科\n" +
          "临床科室/儿童医学中心/儿科：新生儿科\n" +
          "临床科室/儿童医学中心/张涤中医儿科临床研究所\n" +
          "临床科室/眼科\n" +
          "临床科室/耳鼻咽喉头颈外科\n" +
          "临床科室/口腔科\n" +
          "临床科室/肝病实验室/肝病实验室\n" +
          "临床科室/肝病实验室/肝病科、感染性疾病科\n" +
          "临床科室/肿瘤医学中心/肿瘤科\n" +
          "临床科室/肿瘤医学中心/肿瘤科：肿瘤内一科（胃肠生殖科）\n" +
          "临床科室/肿瘤医学中心/肿瘤科：肿瘤内二科（肝胆胰头颈科）\n" +
          "临床科室/肿瘤医学中心/肿瘤科：肿瘤内三科（胸部肿瘤科）\n" +
          "临床科室/肿瘤医学中心/放疗中心\n" +
          "临床科室/骨伤科/骨伤一科（脊柱一科）\n" +
          "临床科室/骨伤科/骨伤二科（脊柱二科）\n" +
          "临床科室/骨伤科/骨伤三科（四肢关节科）\n" +
          "临床科室/骨伤科/骨伤三科（运动筋伤科）\n" +
          "临床科室/骨伤科/骨伤四科（手外创伤科）\n" +
          "临床科室/骨伤科/骨伤五科（骨伤科中医经典病房）\n" +
          "临床科室/骨伤科/骨伤六科（足踝关节与矫形科）\n" +
          "临床科室/针灸推拿康复中心\n" +
          "临床科室/急诊医学中心/急诊内科\n" +
          "临床科室/急诊医学中心/急诊外科\n" +
          "临床科室/急诊医学中心/120急救中心\n" +
          "临床科室/重症医学科（中心ICU）\n" +
          "临床科室/美容整形科\n" +
          "临床科室/健康管理科\n" +
          "临床科室/治未病中心\n" +
          "临床科室/慢病管理科\n" +
          "临床科室/疼痛科\n" +
          "医技科室/麻醉手术科/麻醉科\n" +
          "医技科室/麻醉手术科/手术部\n" +
          "医技科室/医学检验中心\n" +
          "医技科室/病理科\n" +
          "医技科室/放射影像科/PET—CT中心\n" +
          "医技科室/放射影像科/放射影像科\n" +
          "医技科室/核医学科\n" +
          "医技科室/超声影像科\n" +
          "医技科室/消化内镜中心\n" +
          "医技科室/药学部/中心药库\n" +
          "医技科室/药学部/临床药学室\n" +
          "医技科室/药学部/调剂室\n" +
          "医技科室/静脉药物配置中心\n" +
          "医技科室/制剂中心/炮制室\n" +
          "医技科室/制剂中心/中药制剂室\n" +
          "医技科室/制剂中心/西药制剂室\n" +
          "医技科室/制剂中心/精制饮片生产部\n"+
      "行政后勤部门\n"+
      "门诊跟师",
      form:{
        name: '',
        idNumber: '',
        idNumberImg: '',
        sex: '',
        position: '',
        sourceHospital: '',
        startTime: new Date(),
        endTime: new Date(),
        licenseNumber: '',
        applicationForm: '',
        agreement: '',
        studyRoom:'',
        studyProject: '',
        emergencyContactPhone:'',
        certificate: '',
        fileList: []
      },
      showPicker: false,
      studyProjectshowPicker: false,
      PoliticalstatusList: ["中共党员","中共预备党员","共青团员","民革党员","民盟盟员","民建会员","民进会员","农工党党员","致公党党员","九三学社社员","台盟盟员","无党派人士","群众"],
      PoliticalstatusListshow: false,
      studyProjectColumns: ["病房进修","门诊跟师进修","传统医学师学习","其他"],
      positionshowPicker: false,
      positionColumns: ["医士","医师","主治医师","副主任医师","主任医师","药士","药师","主管药师","副主任药师","主任药师"
        ,"技士","技师","主管技师","副主任技师","主任技师","护士","护师","主管护师","副主任护师","主任护师","其他"],
      studyTypeshowPicker: false,
      studyTypeColumns: ["医生","护士","药剂人员","技师","其他"],
      deadlineshowPicker: false,
      deadlineColumns: ["3个月","6个月","9个月","12个月","其他 (和毕教中心工作人员联系0731-85600682)"],
      idNumberImguploader: [],
      applicationFormuploader: [],
      agreementuploader: [],
      certificateuploader: [],
      currentDate: new Date(),
      startTimeShowPicker: false,
      endTimeShowPicker: false,
      maxDate: new Date( (new Date(new Date())).getFullYear(), 11, 31),
      minDate: new Date(  (new Date(new Date())).getFullYear(), 0, 1),
      resultJson:[],
      show: false,
      addressvalue: '',
      showArea: false,
      areaList, // 数据格式见 Area 组件文档
      address: '',
      showLoad: false
    };
  },
  //计算属性 类似于data概念
  computed: {},
  filters:{
    relativeTime (val) {
      const date = new Date(val);
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate() }日`;
    }
  },
  //方法集合
  methods: {
    onSubmit() {
      console.log("触发2")
      this.showLoad = true
      UserMsgSaveOrUpdata(this.form).then(res=>{
        this.showLoad = false
        if(res.code===0){
          if(res.data === "1"){
            Toast.success('覆盖成功！');
            Notify({
              type: 'warning',
              message: '请勿多次提交！！！已经覆盖掉您上次提交的信息！！！',
              duration: 10000,
            });
          }else {
            this.showLoad = false
            Toast.success(res.data);
          }
        }
      })
    },
    idNumberImgRead(file,detail){
      this.form.idNumberImg = file.content
    },
    applicationFormImgRead(file,detail){
      const maxSizeInBytes=1024*1024*2;//1MB
      if(maxSizeInBytes<file.file.size){
        // 危险通知
        Notify({ type: 'danger', message: '上传的图片文件大小超过限制(2MB)' });
        this.applicationFormuploader = []
        return;
      }
      const formData = new FormData();
      formData.append('file', file.file);
      axios.post("https://contedu.hnzyfy.com/api/files/upload",formData,{
        headers: {
          'Content-Type': 'multipart/form-data;', // 关键
        },
      }).then(res=>{
        if(res.data.code === 0){
          this.form.applicationForm = res.data.data
        }else {
          Notify({ type: 'danger', message: '上传失败' });
        }
      })
    },
    agreementImgRead(file,detail){
      const maxSizeInBytes=1024*1024*2;//1MB
      if(maxSizeInBytes<file.file.size){
        // 危险通知
        Notify({ type: 'danger', message: '上传的图片文件大小超过限制(2MB)' });
        this.agreementuploader = []
        return;
      }
      const formData = new FormData();
      formData.append('file', file.file);
      axios.post("https://contedu.hnzyfy.com/api/files/upload",formData,{
        headers: {
          'Content-Type': 'multipart/form-data;', // 关键
        },
      }).then(res=>{
        if(res.data.code === 0){
          this.form.agreement = res.data.data
        }else {
          Notify({ type: 'danger', message: '上传失败' });
        }
      })
    },
    certificateImgRead(file,detail){
      const maxSizeInBytes=1024*1024*2;//1MB
      console.log(file.file)
      if(maxSizeInBytes<file.file.size){
        // 危险通知
        Notify({ type: 'danger', message: '上传的图片文件大小超过限制(2MB)' });
        this.certificateuploader = []
        return;
      }
      const formData = new FormData();
      formData.append('file', file.file);
      axios.post("https://contedu.hnzyfy.com/api/files/upload",formData,{
        headers: {
          'Content-Type': 'multipart/form-data;', // 关键
        },
      }).then(res=>{
        if(res.data.code === 0){
          this.form.certificate = res.data.data
        }else {
          Notify({ type: 'danger', message: '上传失败' });
        }
      })
    },
    deleteIdNumberImg(file,detail){
      this.form.idNumberImg = ""
      this.form.applicationForm = ""
      this.form.agreement = ""
      this.form.certificate = ""
    },
    onConfirm1(time) {
      this.form.startTime = time;
      this.startTimeShowPicker = false;
    },
    onConfirm2(time){
      this.form.endTime = time;
      this.endTimeShowPicker = false;
    },
    generateNestedStructure(inputString) {
      const departments = inputString.split('\n');
      const result = [];

      for (const department of departments) {
        const levels = department.split('/');
        let currentLevel = result;

        for (const level of levels) {
          let foundLevel = currentLevel.find(item => item.text === level);

          if (!foundLevel) {
            const newLevel = { text: level, value: level, children: [] };
            currentLevel.push(newLevel);
            currentLevel = newLevel.children;
          } else {
            foundLevel.children.map(item=>{
              if(item.children!==undefined&&item.children.length===0){
                delete item.children
              }
            })
            currentLevel = foundLevel.children;

          }
        }
      }

      return result;
    },
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      }
      return val;
    },
    onFailed(){
      Notify({ type: 'danger', message: '请检查您所填的数据！！' ,duration: 5000});
    },
    handleChange(res, file) {
      console.log(res.data)
      this.form.idNumberImg = res.data;
    },
    handleRemove(){
      this.form.idNumberImg = '';
    },
    studyRoomonFinish(obj){
      this.form.studyRoom =obj.value
      this.show = false
    },
    onaddressConfirm(values) {
      this.value = values
          .filter((item) => !!item)
          .map((item) => item.name);
        this.form.province = this.value[0] === "湖南省"? "省内":"省外";
        this.form.provinceContent = this.value[0];
        this.form.city = this.value[1]+"/"+ this.value[2];
      this.address = this.form.provinceContent+"/"+this.form.city
      this.showArea = false;
    },
    studyProjectonConfirm(value, index){
      console.log(value)
      this.form.studyProject = value
      this.studyProjectshowPicker = false
    },
    positionConfirm(value, index){
      this.form.position = value
      this.positionshowPicker = false
    },
    PoliticalstatusListshowConfirm(value, index){
      this.form.politicalStatus = value
      this.PoliticalstatusListshow = false
    },
    studyTypeConfirm(value, index){
      console.log(value)
      this.form.studyType = value
      this.studyTypeshowPicker = false
    },
    deadlineonConfirm(value, index){
      console.log(value)
      this.form.deadline = value
      this.deadlineshowPicker = false
    },
    goPreview() {
      GetByIdFile("1").then(res=>{
          renderAsync(res, this.$refs.files); // 渲染到页面
      })
    },
    goinquire(){
      this.$router.push("/inquire")
    },
    DownloadTZ(){
      GetByIdFile("1").then(res=>{
        var elink = document.createElement('a');
        elink.download = `进修通知.docx`;
        elink.style.display = 'none';
        var blob = new Blob([res], { type: 'application/docx' });
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      })
    },
    DownloadZL(){
      GetByIdFile("3").then(res=>{
        var elink = document.createElement('a');
        elink.download = `证书.zip`;
        elink.style.display = 'none';
        var blob = new Blob([res], { type: 'application/zip' });
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      })
    }
  },
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {
    this.resultJson = this.generateNestedStructure(this.startList);
    this.resultJson.map(item=>{
      if(item.children!==undefined&&item.children.length===0){
        delete item.children
      }else if(item.children!==undefined){
        item.children.map(item1=>{
          if(item1.children!==undefined&&item1.children.length===0){
            delete item1.children
          }else if(item1.children!==undefined){
            item1.children.map(item2=>{
              if(item2.children!==undefined&&item2.children.length===0){
                delete item2.children
              }
            })
          }
        })
      }
    })
    this.goPreview()
  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style lang="less" scoped>
/deep/
.el-upload-list__item-name{
  max-width: 3rem;
}

.collect-information-box{
  width: 100vw;
  background: #e0fcff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .title{
    width: 95%;
    flex: 0.2;
    padding: 0.769rem 1.282rem 0.369rem 1.282rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    .title-img{
      img{
        width: 2.564rem;
      }
    }
    .title-text{
      font-size: 0.513rem;
      font-weight: 900;
      margin-top: 0.256rem;
    }
    .title-Instructions{
      margin-top: 0.256rem;
      font-size: 0.453rem;
      font-weight: 600;
    }
  }
  .form-box{
    width: 100vw;

    .form-title{
      font-size: 0.513rem;
      font-weight: 900;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 0.256rem;
    }
  }
  .form-buttom{
    width: 95%;
    flex: 0.1;
  }
}

.docWrap{

  overflow-x: auto;
  .files-box{
    height: 70vh;
    position: relative;
  }
}
/deep/
.docx-wrapper{
  padding: 0 !important;
  background:white;
}
/deep/
.docx-wrapper>section.docx{
  width: 95% !important;
  padding: 0 !important;
  box-shadow:none;
  position: absolute;
  overflow-x: auto !important;
}
.Download-box{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 0.513rem;
  color: #2591ff;
}

</style>